<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close" top="5vh">
        <div>
            <el-row :gutter="20" style="margin-bottom: 20px">
                <el-col :span="6">
                    <el-input v-model="queryParams._name_" type="text" placeholder="请输入名称" @change="getList"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-select v-model="queryParams.online" style="width: 100%" placeholder="请选择状态" @change="getList">
                        <el-option label="在线" value="1"></el-option>
                        <el-option label="离线" value="0"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-col>
            </el-row>
            <el-table :data="tableData" style="width: 100%" height="70vh" @selection-change="onSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
                    <template slot-scope="{$index}">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="carName" label="车辆名称"></el-table-column>
                <el-table-column prop="carNo" label="车牌号"></el-table-column>
                <el-table-column prop="onlineStatus" label="在线状态" width="100" align="center">
                    <template slot-scope="{row}">
                        {{ row.onlineStatus == 1 ? '在线' : '离线' }}
                    </template>
                </el-table-column>
                <el-table-column prop="longitude" label="经度"></el-table-column>
                <el-table-column prop="latitude" label="纬度"></el-table-column>
            </el-table>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </el-dialog>

</template>
<script>
import {getList} from '@/api/car'
import {add} from '@/api/device'

export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
        item: {
            type: Object,
            default: () => {
            }
        },
        group: {
            type: Object,
            default: ()=>{}
        }
    },
    watch: {
        show: {
            handler(nv) {
                if (nv) {
                    this.getList()
                    this.form = this.item || {}
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            form: {},
            queryParams: {

            },
            tableData: [],
            select: []
        }
    },
    methods: {
        close() {
            this.$emit('update:show', false)
        },
        reset() {
            this.queryParams = {};
            this.getList()
        },
        async getList() {
            try {
                const res = await getList(this.queryParams);
                this.tableData = res.data;
            } catch (e) {

            }
        },
        onSelectionChange(e) {
            this.select = e;
        },
        submit() {
            if(!this.select.length) return this.$message.warning('请选择监控！');
            const items = this.select.map(item => {
                return {
                    ...item,
                    location: `[${item.longitude},${item.latitude}]`
                }
            })
            const params = Object.assign({typeKey: 1}, this.group, {paramList: items});
            add(params).then(res => {
                if(res.code == 1) {
                    this.$emit('confirm');
                    this.close()
                }
            })
        }
    }
}
</script>


<style scoped lang="scss">

</style>

